<template>
  <div>
    <div class="interpret-container">
      <div class="interpret-header">
        <img
            src="https://fc-feed.cdn.bcebos.com/aix/aiAvatar.png"
            class="interpret-header-logo"
        />
        <div>智能数据分析</div>
      </div>
      <div class="interpret-content" style="font-size: 14px">
        <div><b
            class="interpret-title">潜力提升</b>与您业务相关的<span>高消费词<b>10000个、</b></span><span>高转化词<b>1476个</b>、</span><span>热搜词<b>90个</b></span>进入榜单，建议您关注5.27~6.02
          <button type="button" name=""
                  class="one-button interpret-action one-main one-button-text-strong one-button-medium">
            <span>关键词周榜单。</span></button>
        </div>
      </div>
    </div>
    <div class="fcRightBox">
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div>
          <div class="fcHeader-title-container">
            <el-tabs v-model="activeName" style="width: 100%" @tab-click="handleClick">
              <el-tab-pane label="关键词" name="first">
                <div class="contentHeader contentHeaderManagecenter">
                  <div
                      style="
                      display: flex;
                      align-content: center;
                      justify-content: flex-start;
                    "
                  >
                    <el-button class="buttonAdd" @click="btnXiu" style="width: 104px;margin-right:10px;font-size: 14px "
                    >新建关键词
                    </el-button
                    >
                    <el-input
                        placeholder="请搜索关键词"
                        class="keywordInput"
                        style="width: 198px;margin-right:10px;margin-top: 2px;height: 30px!important;"
                        v-model="form.keywords"
                        @change="queryList"
                    ><i
                        slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
                    <el-button class="buttonBtn" @click="btnXiu" style="width: 62px"
                    >筛选
                    </el-button
                    >
                  </div>
                  <div class="contentHeader_right" style="justify-content: flex-end">
                    <button
                        @click="btnXiu"
                        style="width: 34px; height: 32px;margin-right: 16px"
                        type="button"
                        name
                        class="one-button refresh-operation one-main one-button-normal one-button-medium"
                    >
                      <span>
                        <div
                            class="one-loading-nested-loading one-loading-nested-loading-normal"
                        >
                          <div class="one-loading-container">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                min-width="14"
                                height="14"
                                class="dls-icon"
                                focusable="false"
                            >
                              <path
                                  fill="currentColor"
                                  d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"
                              />
                            </svg>
                          </div>
                        </div>
                      </span>
                    </button>

                    <el-date-picker class="custom-date-picker"
                                    format="yyyy/MM/dd"
                                    v-model="timerArray"
                                    style="width: 240px;;margin-right: 16px "
                                    type="daterange"
                                    align="right"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="queryList"
                                    :picker-options="pickerOptions">
                      <template slot="prefix">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                             height="24"
                             class="custom-icon" focusable="false">
                          <path fill="currentColor"
                                d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                        </svg>
                      </template>
                    </el-date-picker>
                    <el-dropdown style="margin-right: 16px">
                      <el-button type="primary"
                                 style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                        <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in options11" :key="item.value">{{
                            item.label
                          }}
                        </el-dropdown-item>

                      </el-dropdown-menu>
                    </el-dropdown>
                    <el-button class="rightBt"
                               style="padding: 6px 12px;margin-right: 8px; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea;"
                               @click="handleTabClick">重置列宽
                    </el-button>

                    <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择"
                               class="select-with-prefix1">
                      <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>

                  </div>

                </div>
                <el-table border
                          :data="tableList"
                          style="width: 100%; background: #ebedf5"
                          :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      fixed
                      type="selection"
                      min-width="55"
                  ></el-table-column>
                  <el-table-column
                      fixed
                      align="left"
                      prop="keyword"
                      label="标签"
                      min-width="80"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.$index!==0"  class="one-table-row-cell-content">
                        <div class="materiel-list-row-tag">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24"
                               class="dls-icon " focusable="false" style="font-size: 18px;">
                            <path fill="currentColor" fill-rule="evenodd"
                                  d="M9.028 7.17a3.502 3.502 0 1 0 3.502 6.067A3.502 3.502 0 0 0 9.028 7.17zm.454 3.783a1.498 1.498 0 1 1 2.594-1.498 1.498 1.498 0 0 1-2.594 1.498z"
                                  clip-rule="evenodd"></path>
                            <path fill="currentColor" fill-rule="evenodd"
                                  d="M9.236 1.921a4 4 0 0 0-4.858 2.805L2.956 9.86a3 3 0 0 0 .293 2.3l4.885 8.462a5 5 0 0 0 6.83 1.83l4.33-2.5a5 5 0 0 0 1.83-6.83L16.24 4.661a3 3 0 0 0-1.846-1.404L9.236 1.92zM6.306 5.26a2 2 0 0 1 2.428-1.402l5.158 1.336a1 1 0 0 1 .615.468l4.885 8.461a3 3 0 0 1-1.098 4.098l-4.33 2.5a3 3 0 0 1-4.098-1.098l-4.885-8.461a1 1 0 0 1-.098-.767L6.305 5.26z"
                                  clip-rule="evenodd"></path>
                          </svg>
                        </div>
                      </div>
                      <span v-else>-</span>
                    </template>

                  </el-table-column>
                  <el-table-column
                      fixed
                      prop="keyword"
                      label="关键词"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="keywordStatus"
                      label="状态"
                      sortable  align="left"
                      min-width="180"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.$index!==0"  class="status-dot status-dot-normal"></span>
                      {{ scope.row.keywordStatus }}
                    </template>

                  </el-table-column>
                  <el-table-column
                      prop="isInefficient"  align="right"
                      label="是否低效关键词" sortable
                      min-width="200"
                  ></el-table-column>
                  <el-table-column
                      prop="promotionPlan"
                      label="推广计划"
                      sortable  align="left"
                      min-width="180"
                  >
                    <template slot-scope="scope">
                      <span style="color: #0054e6">
                                           {{ scope.row.promotionPlan }}

                   </span>
                    </template>


                  </el-table-column>
                  <el-table-column
                      prop="promotionUnit"
                      label="推广单元"  align="left"
                      sortable
                      min-width="180"
                  >
                    <template slot-scope="scope">
                   <span style="color: #0054e6">
                                           {{ scope.row.promotionUnit }}

                   </span>
                    </template>


                  </el-table-column>
                  <el-table-column prop="offer" label="点击出价" sortable  align="right"></el-table-column>
                  <el-table-column
                      prop="matchPattern"  align="left"
                      label="匹配模式" sortable
                      min-width="120"
                  ></el-table-column>
                  <el-table-column
                      prop="keywordQuality"  align="right"
                      label="关键词质量度" sortable
                      min-width="120"
                  >
                    <template slot-scope="scope">
                      <div style="display: flex;justify-content:space-between;    position: relative;
    top: 5px;align-items: center" class="tableRate">
                        <el-rate v-if="scope.$index!==0"
                                 :max="5"
                                 v-model="scope.row.keywordQualityNum"
                                 disabled
                                 show-score
                                 text-color="#ff9900"
                                 score-template="">
                        </el-rate>
                        <span>                      {{ scope.row.keywordQuality }}
</span>
                      </div>

                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="consumption"
                      label="消费"
                      sortable align="right"
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="toShow"
                      label="展现" align="right"
                      sortable
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="click"
                      label="点击" align="right"
                      sortable
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="avgClickPrice" align="right"
                      label="平均点击价格" sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="clickRate"
                      label="点击率" sortable align="right"
                      min-width="180"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.clickRate }}%
                    </template>
                  </el-table-column>

                  <el-table-column align="left"
                      prop="keywordId"
                      label="关键词ID"
                      min-width="140"
                  ></el-table-column>


                </el-table>

                <el-pagination background
                               style="text-align: right; margin-top: 40px"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="form.pageNum"
                               :page-size="form.pageSize"
                               :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                               layout="sizes, prev, pager, next,jumper"
                               :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="搜索词" name="second">
                <div class="contentHeader contentHeaderManagecenter">
                  <div
                      style="
                      width: 370px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <p style="font-size: 16px;color: #282c33">详细数据</p>
                    <!--                    <el-button class="buttonAdd" @click="btnXiu"-->
                    <!--                      >新建搜索词</el-button-->
                    <!--                    >-->
                    <!--                    <el-input-->
                    <!--                      placeholder="请搜索搜索词"-->
                    <!--                      style="width: 200px"-->
                    <!--                      v-model="form.searchTerm"-->
                    <!--                      @change="queryList"-->
                    <!--                    ></el-input>-->
                    <!--                    <el-button class="buttonBtn" @click="btnXiu"-->
                    <!--                      >筛选</el-button-->
                    <!--                    >-->
                  </div>
                  <div class="contentHeader_right" style="justify-content: flex-end">

                    <el-date-picker class="custom-date-picker"
                                    format="yyyy/MM/dd"
                                    v-model="timerArray"
                                    style="width: 240px;;margin-right: 16px "
                                    type="daterange"
                                    align="right"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="queryList"
                                    :picker-options="pickerOptions">
                      <template slot="prefix">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                             height="24"
                             class="custom-icon" focusable="false">
                          <path fill="currentColor"
                                d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                        </svg>
                      </template>
                    </el-date-picker>
                    <el-dropdown style="margin-right: 16px">
                      <el-button type="primary"
                                 style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value111
                    }}</span>

                        <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in options11" :key="item.value">{{
                            item.label
                          }}
                        </el-dropdown-item>

                      </el-dropdown-menu>
                    </el-dropdown>
                    <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择"
                               class="select-with-prefix1">
                      <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px; " @click="handleTabClick">
                      重置列宽
                    </el-button>


                  </div>
                </div>
                <el-table border
                          :data="tableList"
                          style="width: 100%; background: #ebedf5"
                          :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      align="left"
                      prop="createTime"
                      label="日期"
                      sortable
                      min-width="120"
                  ></el-table-column>
                  <el-table-column
                      align="left"
                      prop="promotionPlan"
                      label="推广计划"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      align="left"
                      prop="promotionUnit"
                      label="推广单元"
                      sortable
                      min-width="180"
                  >
                    <template slot-scope="scope">
                   <span style="color: #0054e6">
                                           {{ scope.row.promotionUnit }}

                   </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="left"
                      prop="originality"
                      label="创意"
                      min-width="280"
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.originality !== '-' && scope.row.originality !== undefined">
                        <div
                            class="brave-the-winds-common-libs-creative-preview-mobile brave-the-winds-common-libs-creative-preview brave-the-winds-common-libs-creative-preview-border">
                          <div class="title">
                            <div><u></u><u>{{ extractCompanyName(scope.row.originality) }}</u>-{{ extractCompanyNameAfter(scope.row.originality) }}</div>
                          </div>
                          <div class="brave-the-winds-common-libs-creative-preview-mobile-text" pictureurl="">
                            <div><u></u><u> {{ extractCompanyName(scope.row.originalityContent) }}</u>{{ extractCompanyNameAfter(scope.row.originalityContent) }}</div>
                          </div>
                          <div class="brave-the-winds-common-libs-creative-preview-footer-mobile">
                            <div class="content">
                              <div class="url">{{ scope.row.searchWebsite}}</div>
                              <div class="ads">广告</div>
                              <img class="ensure-svg"
                                   src="https://tuiguang-s3.bdstatic.com/commonLibs/static/media/ensure.b395fe10..svg"
                                   alt=""></div>
                            <div class="ellipsis">...</div>
                          </div>
                        </div>
                      </div>
                      <div v-else>
                        -
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column

                      prop="keyword"
                      label="关键词/网址"
                      sortable align="left"
                      min-width="180"
                  ></el-table-column>
                  <el-table-column

                      prop="searchTerm"
                      label="搜索词"
                      sortable align="left"
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="additionStatu"
                      label="账户添加状态"
                      sortable align="left"
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="planType" align="left" sortable
                      label="计划类型" min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="mode"
                      label="触发模式"
                      align="left"
                      min-width="280"
                  ></el-table-column>
                  <el-table-column
                      prop="toShow"
                      label="展现"
                      sortable align="right"
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="click"
                      label="点击"
                      sortable align="right"
                      min-width="140"
                  ></el-table-column>

                  <el-table-column
                      prop="consumption"
                      label="消费"
                      sortable align="right"
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="clikRate"
                      label="点击率"
                      sortable align="right"
                      min-width="120"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.clickRate }}%
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="avgClickPrice"
                      label="平均点击价格"
                      sortable align="right"
                      min-width="140"
                  ></el-table-column>
                  <el-table-column
                      prop="caozuo"
                      label="操作"
                      align="left"
                      fixed="right"
                      min-width="140"
                  >
                    <template slot-scope="scope">
                      <div  v-if="scope.$index!==0" >       <span style="color: #0054e6;cursor: pointer;margin-right: 10px">添词</span> <span
                          style="color: #0054e6;cursor: pointer">添否</span></div>
               <span v-else>-</span>
                    </template>

                  </el-table-column>

                </el-table>

                <el-pagination background
                               style="text-align: right; margin-top: 40px"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="form.pageNum"
                               :page-size="form.pageSize"
                               :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                               layout="sizes, prev, pager, next,jumper"
                               :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="否定关键词" name="third">
                <div class="contentHeader contentHeaderManagecenter">
                  <div
                      style="
                      width: 370px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-button class="buttonAdd" @click="btnXiu"
                    >添加否定关键词
                    </el-button
                    >
                    <el-input
                        placeholder="请搜索否定关键词（包）"
                        style="width: 200px"
                        v-model="form.negativeKeywords"
                        @change="queryList"
                    ><i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>

                  </div>
                  <div class="contentHeader_right" style="justify-content: flex-end">

                    <div class="area">
                      <div class="winds-button-with-carousel" id="link-negative-master-btn"
                           style="display: flex;align-items: center;justify-content: flex-start">
                        <div style="margin-top: 4px;margin-right: 4px">
                          <div class="resource-item" tabindex="-1" style="width: 100%;"><img
                              src=""
                              alt="" width="100%"></div>
                        </div>
                        <span class="button-text">前往否词管理大师</span></div>
                    </div>

                  </div>
                </div>
                <el-table border
                          :data="tableList"
                          style="width: 100%; background: #ebedf5" empty-text="您还没有数据，请点击表格左上方新建按钮"
                          :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      fixed
                      type="selection"
                      min-width="55"
                  ></el-table-column>
                  <el-table-column
                      fixed
                      prop="negativeKeywords"
                      label="否定关键词"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="affiliationLevel" sortable
                      label="所属层级" min-width="180"
                  ></el-table-column>

                  <el-table-column
                      prop="affiliationUnit"
                      label="所属计划/单元"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="matchPattern"
                      label="匹配模式"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <!-- <el-table-column
                    prop="avgClickPrice"
                    label="评价点击价格"
                  ></el-table-column>
                  <el-table-column
                    prop="clickRate"
                    label="点击率"
                    sortable
                    min-width="180"
                  ></el-table-column> -->
                </el-table>

                <el-pagination background
                               style="text-align: right; margin-top: 40px"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="form.pageNum"
                               :page-size="form.pageSize"
                               :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                               layout="sizes, prev, pager, next,jumper"
                               :total="form.total"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
            <div v-show="activeName!=='third'" class="right-part">

              <div class="fcHeader-date-pick-container">
                <div class="area">
                  <div class="winds-button-with-carousel" id="link-negative-master-btn"
                       style="display: flex;align-items: center;justify-content: flex-start">
                    <div style="margin-top: 4px;margin-right: 4px">
                      <div class="resource-item" tabindex="-1" style="width: 100%;"><img
                          src=""
                          alt="" width="100%"></div>
                    </div>
                    <span class="button-text">体验沉侵模式</span></div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from "echarts";
import {
  getPromotionKeywordList,
  getPromotionSearchTermList,
  getPromotionNegativeKeywordsList,
} from "@/services/model/managecenter";
import {getLocalStorageItem} from "@/utils/storage-helper";

export default {
  mixins: [ItemMixins],
  data() {
    return {

      options11: [{
        value: 1,
        label: '自定义列'
      }, {
        value: 2,
        label: '默认推荐'
      }],
      isToggleStatus: false,
      chart: null,
      value: "下载",
      // 分页参数
      userInfo: getLocalStorageItem("userInfo"),
      form: {
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
      }, value11: '自定义',
      value111: '自定义列',
      options2: [
        {
          value: "下载",
          label: "下载",
        },
        {
          value: "发送邮箱",
          label: "发送邮箱",
        },
        {
          value: "下载设置",
          label: "下载设置",
        },
      ],
      options: [
        {
          value: 0,
          label: "合计",
        },
        {
          value: 1,
          label: "分时",
        },
        {
          value: 2,
          label: "分日",
        },
        {
          value: 3,
          label: "分周",
        },
        {
          value: 4,
          label: "分月",
        },
      ],
      isSelect: "账户整体",
      activeName: "first",
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    extractCompanyName(content) {
      if (typeof content !== 'string' || content === undefined) {
        return ''; // 或者返回一个默认值
      }
      const companyIndex = content.lastIndexOf('公司');
      if (companyIndex !== -1) {
        // 截取“公司”及其之前的部分
        return content.substring(0, companyIndex + 2); // +2 是为了包含“公司”这两个字
      }
      // 如果没有找到“公司”，返回原始内容或空字符串（根据你的需求）
      return '';
    },
    extractCompanyNameAfter(content) {
      if (typeof content !== 'string' || content === undefined) {
        return ''; // 或者返回一个默认值
      }
      const companyIndex = content.indexOf('公司');
      if (companyIndex !== -1) {
        // 截取“公司”之后的部分（不包括“公司”本身）
        return content.substring(companyIndex + 2); // +2 是为了跳过“公司”这两个字
      }
      // 如果没有找到“公司”，返回空字符串或原始内容（取决于您的需求）
      return '';
    }
  ,
    handleClick(tab) {
      this.activeName = tab.name;
      // 清空
      this.form = {
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      (this.timerArray = [new Date(), new Date()]), // 初始化为 null 或合适的日期值，;
          this.queryList();
    },
    replaceNullWithDash(arr) {
      // 确保数组不为空
      if (arr.length === 0) {
        return arr;
      }

      // 获取数组的最后一个对象
      const lastObject = arr[arr.length - 1];

      // 遍历对象的属性
      for (let key in lastObject) {
        if (lastObject.hasOwnProperty(key) && lastObject[key] === null) {
          // 将值为null的属性修改为"-"
          lastObject[key] = "-";
        }
      }

      return arr;
    },
    moveLastToFirst(objArray) {
      if (objArray.length > 0) {
        const lastObj = objArray.pop(); // 移除最后一个对象
        objArray.unshift(lastObj); // 将最后一个对象移到数组的第一个位置
        return objArray;
      } else {
        return objArray; // 如果数组为空，直接返回
      }
    },
    // 关键词
    async queryList() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = [];
      this.tableList = [{keywordStatus: ''}];
      res =
          this.activeName === "first"
              ? await getPromotionKeywordList(this.form)
              : this.activeName === "second"
              ? await getPromotionSearchTermList(this.form)
              : await getPromotionNegativeKeywordsList(this.form);
      let modifiedArray = this.replaceNullWithDash(res.rows);
      if (this.activeName === "first") {
        let data = this.moveLastToFirst(modifiedArray)
        let dataList = []
        data.map((x, index) => {
          dataList.push(x)
          dataList[index].keywordQualityNum = Number(x.keywordQuality) / 2
        })
        this.tableList = dataList || [];

      } else {
        this.tableList = this.moveLastToFirst(modifiedArray) || [];

      }
      this.form.total = Math.ceil(Number(res.total));
      ;
    },
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }
      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background-color: rgb(255, 255, 255);
    padding: 0px 24px 24px;
    border-radius: 6px;
    margin-bottom: 42px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }
  }
}

.fcHeader-title-container {

  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  .left-part {

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .title {
      font-size: 20px;
      color: #282c33;
    }

    .refresh-data-time {
      display: inline-block;
      margin-bottom: 4px;
    }

  }

  .right-part {
    text-align: right;
    position: absolute;
    right: 0px;
    top: 4px;


    .baidu-market-tip {
      color: #a8b0bf;
      font-size: 12px;

      .baidu-market-name {
        color: #0052cc;
      }
    }

    .fcHeader-date-pick-container {
      margin-left: 12px;
      flex-wrap: wrap;

      /deep/ .el-checkbox {
        margin-left: 12px;
      }
    }
  }
}

</style>

<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67c23a;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  background-color: rgb(255, 255, 255);

.el-input__inner {
  height: 32px;
  line-height: 32px;
}

}
.contentHeader_right {
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contentHeader span {
  font-size: 14px;
}

.buttonAdd {
  background: #0054e6;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonBtn {
  background: #e2e6f0;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.refresh-operation {
  width: 32px;
  align-items: center;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  font-size: 14px;
}

.interpret-container {
  width: 100%;
  border-radius: 6px;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  background-image: linear-gradient(to bottom right, #bfe8ff -50%, #fff 35%);
  background-color: #fff;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}

.interpret-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.interpret-container .interpret-header-logo {
  width: 21px;
  height: 21px;
  margin-right: 10px;
}

.interpret-container .interpret-content {
  margin-top: 10px;
  border-radius: 10px;
  border-left: 2px solid #729cfe;
  background: #e5eeff;
  box-sizing: border-box;
  padding: 10px 30px;
  padding-left: 10px;
}

.interpret-container .interpret-content > div::marker {
  color: #729cfe;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

.area .button-text {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #282c33;
  line-height: 1.4;

}

.winds-button-with-carousel {
  display: flex;
  background: linear-gradient(
      270deg, #bed8ff 0%, #d9edff 100%);
  border-radius: 4px;
  padding: 6px 12px;
  align-items: center;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
}

.interpret-content {
  font-size: 14px;

}

.interpret-content > div::before {
  content: ''; /* 空内容，用于占位 */
  display: inline-block; /* 使其成为行内块元素 */
  vertical-align: middle; /* 垂直对齐 */
  width: 4px; /* 项目符号的宽度 */
  height: 4px; /* 项目符号的高度 */
  background-color: #729cfe; /* 项目符号的颜色 */
  border-radius: 50%; /* 圆形项目符号 */
  margin-right: 8px; /* 与文本的间距 */
}

.interpret-content > div .interpret-title {
  margin-right: 4px;
  font-weight: 600;
  font-size: 14px;

}

.status-dot {
  border: 4px solid;
  border-radius: 4px;
  margin-right: 8px;
  width: 0;
  height: 0;
  display: inline-block;
  color: #00bf5c;
}
.brave-the-winds-common-libs-creative-preview-mobile {
  position: relative;
  width: 246px;
}
.brave-the-winds-common-libs-creative-preview-border {
  border: 1px solid #e2e6f0;
}
.brave-the-winds-common-libs-creative-preview {
  padding: 12px 8px;
  background: #fff;
  border-radius: 4px;
}
.brave-the-winds-common-libs-creative-preview-mobile .title {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #000;
}
.brave-the-winds-common-libs-creative-preview-mobile .title div {
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.brave-the-winds-common-libs-creative-preview-mobile-text {
  overflow: hidden;
  font-size: 12px;
  color: #525252;
  margin: 8px 0;
  text-align: justify;
  word-break: break-all;
}
.brave-the-winds-common-libs-creative-preview-mobile-text div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 54px;
  line-height: 18px;
}
.brave-the-winds-common-libs-creative-preview u {
  text-decoration: none;
  color: #f11;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile {
  display: flex;
  color: #b8b8b8;
  justify-content: space-between;
  font-size: 12px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content {
  color: #b8b8b8;
  transform: scale(0.84);
  transform-origin: 0 0;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content .url {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content .ads {
  margin-left: 4px;
  color: #8fbcff;
  width: 25px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .content img.ensure-svg {
  transform: scale(1.2);
  margin-left: 8px;
}
.brave-the-winds-common-libs-creative-preview-footer-mobile .ellipsis {
  margin-top: -4px;
  margin-left: -8px;
}

</style>
